$.get('./data/navData.json', function (res) {
  let data = res.data.myJd
  let str = ''
  data.data.forEach(item => {
    str += `<a href="javascript:;"><span>${item}</span></a>`
  });
  $('.mu_jd_menu1').html(str)
  let str2 = ''
  data.data2.forEach(item => {
    str2 += `<a href="javascript:;"><span>${item}</span></a>`
  });
  $('.mu_jd_menu2').html(str2)
  let data2 = res.data.qiye
  let str3 = ''
  data2.data.forEach(item => {
    str3 += `<a href="javascript:;"><span>${item}</span></a>`
  });
  $('.qiye_menu1').html(str3)

  let data3 = res.data.kehu.kehu
  let str4 = ''
  data3.data.forEach(item => {
    str4 += `<a href="javascript:;"><span>${item}</span></a>`
  });
  str4 = `<div class="kehu_menu1_top">${data3.top}</div>${str4}`
  $('.kehu_menu1').html(str4)

  let data4 = res.data.kehu.shanghu
  let str5 = ''
  data4.data.forEach(item => {
    str5 += `<a href="javascript:;"><span>${item}</span></a>`
  });
  str5 = `<div class="kehu_menu2_top">${data4.top}</div>${str5}`
  $('.kehu_menu2').html(str5)

  let data5 = res.data.wangzhan.tese
  let str6 = ''
  data5.data.forEach(item => {
    str6 += `<a href="javascript:;"><span>${item}</span></a>`
  });
  str6 = `<div class="wangzhan_menu1_top">${data5.top}</div>${str6}`
  $('.wangzhan_menu1').html(str6)

  let data6 = res.data.wangzhan.hangye
  let str7 = ''
  data6.data.forEach(item => {
    str7 += `<a href="javascript:;"><span>${item}</span></a>`
  });
  str7 = `<div class="wangzhan_menu2_top">${data6.top}</div>${str7}`
  $('.wangzhan_menu2').html(str7)

  let data7 = res.data.wangzhan.shanghuo
  let str8 = ''
  data7.data.forEach(item => {
    str8 += `<a href="javascript:;"><span>${item}</span></a>`
  });
  str8 = `<div class="wangzhan_menu3_top">${data7.top}</div>${str8}`
  $('.wangzhan_menu3').html(str8)

  let data8 = res.data.wangzhan.dengduo
  let str9 = ''
  data8.data.forEach(item => {
    str9 += `<a href="javascript:;"><span>${item}</span></a>`
  });
  str9 = `<div class="wangzhan_menu4_top">${data8.top}</div>${str9}`
  $('.wangzhan_menu4').html(str9)
})
let username = localStorage.getItem('username')
let token = localStorage.getItem('token')
if (username && token) {
  $('.login-reg p').eq(0).css('display', 'none')
  $('.login-reg p').eq(1).css('display', 'block')
  $('.loginInfo').html(username)
} else {
  $('.login-reg p').eq(0).css('display', 'block')
  $('.login-reg p').eq(1).css('display', 'none')
  $('.loginInfo').html()
}
drag()
function drag () {
  let markBox = document.querySelector('.main-box-left-top')
  let mark = document.querySelector('.mark')
  let maximg = document.querySelector('.max-img')
  let lgMark = document.querySelector('.lgMark')
  let offLeft = document.querySelector('.main').offsetLeft
  let offTop = document.querySelector('.main').offsetTop
  markBox.onmouseenter = function () {
    mark.style.display = "block"
    lgMark.style.display = "block"
  }
  markBox.onmousemove = function (e) {
    let bili = mark.offsetWidth / markBox.offsetWidth
    maximg.style.width = lgMark.offsetWidth / bili + 'px'
    maximg.style.height = lgMark.offsetHeight / bili + 'px'
    let postX = e.pageX - offLeft - mark.offsetWidth / 2
    let postY = e.pageY - offTop - mark.offsetHeight / 2
    if (postX <= 0) {
      postX = 0
    }
    if (postX >= markBox.offsetWidth - mark.offsetWidth) {
      postX = markBox.offsetWidth - mark.offsetWidth
    }
    if (postY <= 0) {
      postY = 0
    }
    if (postY >= markBox.offsetHeight - mark.offsetHeight) {
      postY = markBox.offsetHeight - mark.offsetHeight
    }
    mark.style.left = postX + 'px'
    mark.style.top = postY + 'px'
    let imgX = postX / bili
    let imgY = postY / bili
    maximg.style.left = -imgX + 'px'
    maximg.style.top = -imgY + 'px'
  }
  markBox.onmouseleave = function () {
    lgMark.style.display = 'none'
    mark.style.display = 'none'
  }
}

//秒杀
miaoSha('2021-6-19 23:00:00')
function miaoSha (str) {
  let newTime = new Date()
  let endTime = new Date(str)
  let time = endTime - newTime
  let shi, fen, miao
  if (time >= 0) {
    shi = Math.floor(time / 1000 / 60 / 60 % 24);
    fen = Math.floor(time / 1000 / 60 % 60);
    miao = Math.floor(time / 1000 % 60);
    shi = shi < 10 ? '0' + shi : shi
    fen = fen < 10 ? '0' + fen : fen
    miao = miao < 10 ? '0' + miao : miao
  }
  $('.miaosha span:nth-of-type(1)').html(shi)
  $('.miaosha span:nth-of-type(2)').html(fen)
  $('.miaosha span:nth-of-type(3)').html(miao)
  setTimeout("miaoSha('2021-6-19 23:00:00')", 1000)
}

//渲染数据
let params = new URLSearchParams(location.search)
let id = params.get('id')
let userid = localStorage.getItem('id')
let pid = null
axios.get(searchProductUrl, { params: { id } }).then((res) => {
  let obj = res.data.data
  $('.min-img').attr('src', obj.pimg)
  let str = `<li><img src=${obj.pimg}></li>`
  $('.imgList ').html(str + $('.imgList ').html())
  $('.pdesc').html(obj.pdesc)
  $('.pprice').html(obj.pprice)
  $('.addShopCart').data('id', obj.pid)
  $('.max-img').attr('src', obj.pimg)
  changeImg()
})
let shopBtn = document.querySelector('.search-shop')
shopBtn.onclick = function () {
  if (userid) {
    location.href = 'shopCart.html'
  } else {
    alert('请登录')
  }
}

//加减按钮事件
$('.topbtn').click(function () {
  let num = parseInt($('#num').val())
  if (num >= 99) {
    num = 99
  } else {
    num += 1
  }
  $('#num').val(num)
})
$('.botbtn').click(function () {
  let num = parseInt($('#num').val())
  if (num <= 1) {
    num = 1
  } else {
    num -= 1
  }
  $('#num').val(num)
})
let numBox = document.querySelector('#num')
numBox.onchange = function () {
  let num = $('#num').val()
  if (num < 1) {
    num = 1
  }
  if (num >= 99) {
    num = 99
  }
  $('#num').val(num)
}


let addCartBtn = document.querySelector('.addShopCart')

addCartBtn.onclick = function () {
  if (userid) {
    let pid = $(this).data('id')
    let uid = userid
    let pnum = $('#num').val();
    axios.get(addCartUrl, { params: { pid, uid, pnum } }).then(function (res) {
      alert(res.data.msg)
      zongshu()
    })
  } else {
    alert('请登录')
  }

}


//购物车数字
zongshu()
function zongshu () {
  let id = localStorage.getItem('id')
  let shopNum = document.querySelector('.search-shop-num')
  if (id) {
    axios.get(selectCartUrl, { params: { id } }).then(function (res) {
      let arr = res.data.data;
      let snum = 0
      Array.from(arr).map(function (item) {
        return snum += Number(item.pnum)
      })
      shopNum.innerHTML = snum
    })
  } else {
    shopNum.innerHTML = 0
  }
}
lazyload()
function lazyload () {
  let pagesize = 20
  let pagenum = 3;
  axios.get(productShowUrl, { params: { pagesize, pagenum } }).then(function (res) {
    if (res.status = 200) {
      let str = ''
      let proArr = res.data.data
      for (let i = 0; i < proArr.length; i++) {
        str += `<li>
        <a href="detail.html?id=${proArr[i].pid}">
          <div>
            <img src=${proArr[i].pimg} alt="">
          </div>
          <div>
            <p><i>自营</i><span>${proArr[i].pdesc}</span></p>
            <div>
              <div>
                <i>￥</i><span>${proArr[i].pprice}</span><span>.00</span>
              </div>
              <p>
                <i>券</i>
              </p>
            </div>
          </div>
        </a>
      </li>`
      }
      let str2 = $('.main-con-con').html()
      $('.main-con-con').html(str2 + str)
    }
  })
}
//退出
$('.tuichu').click(function () {
  localStorage.removeItem('username')
  localStorage.removeItem('id')
  localStorage.removeItem('token')
  location.href = 'index.html'
})
function changeImg () {
  let imgBox = document.querySelectorAll('.imgList>li')
  Array.from(imgBox).forEach(function (v) {
    v.onmouseenter = function () {
      let imgsrc = $(v).children(0).attr('src')
      $('.min-img').attr('src', imgsrc)
      $('.max-img').attr('src', imgsrc)
    }
  })
}

